<template>
	<div>
		<br />
		<h4>发表评论</h4>

		<hr />
		<textarea placeholder="请输入内容" maxlength="120" v-model="msg"></textarea>
		<mt-button class="mu-add" type="primary" size="large" @click="postComment">发表评论</mt-button>

		<div class="cmt-list" v-for="(item, i) in comments" :key="item.add_time">
			<div class="cmt-item">
				<!-- 第{{i+1}} -->
				<div class="cmt-title">第{{ i + 1 }}楼 用户：匿名用户 {{ item.add_time | dateFormat }}</div>
				<div class="cmt-body">{{ item.content }}</div>
			</div>
			<!-- <div class="cmt-item">
				<div class="cmt-title">第2楼 用户：匿名用户 2020-1-28 18:00</div>
				<div class="cmt-body">我们一直在</div>
			</div>
			<div class="cmt-item">
				<div class="cmt-title">第3楼 用户：匿名用户 2020-1-28 18:00</div>
				<div class="cmt-body">此用户很懒</div>
			</div> -->
		</div>
		<mt-button class="mu-addmore" type="danger" size="large" @click="getMore">加载更多</mt-button>
	</div>
</template>
<script>
import { Toast } from 'mint-ui'
export default {
	data() {
		return {
			pageIndex: 1, //默认展示第一页数据
			comments: [], //所有的评论数据
			msg: '', //评论输入的内容
		}
	},
	created() {
		this.getComments()
	},
	methods: {
		getComments() {
			//获取评论
			//id从父组件获取
			this.$http.get('api/getcomments/' + this.id + '?pageindex=' + this.pageIndex).then(result => {
				if (result.body.status === 0) {
					this.comments = this.comments.concat(result.body.message)
				} else {
					Toast('获取评论失败')
				}
			})
		},
		getMore() {
			this.pageIndex++
			this.getComments()
		},
		postComment() {
			if (this.msg.trim().length === 0) {
				return Toast('评论内容不能为空')
			}
			this.$http.post('api/postcomment/' + this.$route.params.id, { content: this.msg.trim() }).then(function(result) {
				if (result.body.status === 0) {
					console.log(result)
					var cmt = { add_time: Date.now(), content: this.msg.trim() }
					this.comments.unshift(cmt)
					this.msg = ''
				} else {
					console.log('失败')
				}
			})
		},
	},
	props: ['id'],
}
</script>
<style lang="">
.mu-add {
	background-color: rgb(238, 134, 151);
}
.mu-addmore {
	background-color: rgba(173, 20, 45, 0.3);
}
.cmt-title {
	background-color: rgba(250, 237, 247, 0.836);
	margin: 8px 0;
	height: 24px;
	line-height: 24px;
	font-size: 16px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.cmt-body {
	text-indent: 2em;
	font-size: 14px;
}
</style>
